<template>
	<uni-popup ref="popup" type="bottom">
		<view class="content" v-if="data.item">
			<view class="hd">
				<text class="title">申请资料</text>
				<icon class="iconfont icon" @click="close()">&#xe733;</icon>
			</view>
			<view class="bd form">
				<view class="form-item">
					<view class="form-title">
						<view class="label">时长（天）</view>
						<view class="value"></view>
					</view>
					<view class="form-control">
						<input class="input" type="text" :value="data.item.task_time" disabled />
					</view>
				</view>
				<view class="form-item">
					<view class="form-title">
						<view class="label">报价（元）</view>
						<view class="value"></view>
					</view>
					<view class="form-control">
						<input class="input" type="text" :value="data.item.task_price" disabled />
					</view>
				</view>
				<view class="form-item">
					<view class="form-title">
						<view class="label">说明</view>
						<view class="value"></view>
					</view>
					<view class="form-control">
						<view class="txt">
							<text>{{data.item.task_intro?data.item.task_intro:'暂无说明'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="ft">
				<button type="default" :class="['btn',{'btn-dis':dis}]" :disabled="dis" hover-class="btnClickStyle">{{orderStatus(data.item.check_status)}}</button>
			</view>
		</view>
	</uni-popup>
</template>
<script setup>
	import { ref, reactive, computed } from 'vue';
	// const emits = 
	const popup = ref(null);
	const data = reactive({
		item: null
	})
	const dis = computed(() => {
		return true;
	});
	// 处理任务状态
	function orderStatus(v) {
		switch (+v) {
			case 1:
				return '审核中';
			case 2:
				return '审核通过';
			case 3:
				return '审核失败';
		}
	}

	function open(item) {
		data.item = item;
		popup.value.open();
	}

	function close() {
		popup.value.close();
	}
	defineExpose({
		open,
		close
	})
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	@import '@/common/css/form.scss';
	.content {
		width: 100%;
		border-radius: 16rpx 16rpx 0 0;
		background-color: #fff;
	}
	.hd {
		@include flex;
		height: 110rpx;
		padding: 0 28rpx;
		border-bottom: 1px solid #ddd;
		.title {
			font-size: 36rpx;
			color: #000;
		}
		.icon {
			font-size: 36rpx;
			color: #666;
		}
	}
	.bd {
		max-height: 72vh;
		overflow-y: auto;
		.form-item {
			border: 1px solid #ECECEC;
			background-color: #F9F9F9;
		}
		.form-control .textarea {
			height: 180rpx;
		}
	}
	.ft {
		@include flex(column, center);
		height: 110rpx;
		.btn {
			width: 694rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			background: $color;
			font-size: 32rpx;
			color: #fff;
			&-dis {
				background-color: #ccc;
			}
		}
	}
</style>
